<template>
  <div class="preview">
    <div class="preview-header">{{ $t('common.preview.headerText') }}</div>
    <div class="preview-body">
      <video v-if="model.isCommonModel" class="video" controls :src="generateVideoUrl(model.video_path)" />
      <video v-else class="video" controls :src="model.video_path" />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { getIP } from '@renderer/api'

const base_url = ref('')

onMounted(async () => {
  await loadAssetPaths();
})

// 加载资源路径列表
const loadAssetPaths = async () => {
  try {
    const result = await getIP();
    base_url.value = result.base_url;
  } catch (error) {
    console.error('加载资源路径失败:', error);
    await MessagePlugin.error('加载资源路径失败: ' + (error.message || '未知错误'));
  } finally {
  }
};


// 生成视频URL
const generateVideoUrl = (videoPath) => {
  if (!videoPath || !base_url.value) return '';
  return `${base_url.value}:9001/face2face/temp/` + videoPath;
};

defineProps({
  model: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="less" scoped>
.preview {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-left: 1px solid #e0e0e0;  // 黑色边框改为浅灰色
  border-right: 1px solid #e0e0e0;  // 黑色边框改为浅灰色
  background-color: #ffffff;  // 添加白色背景

  &-header {
    font-weight: 500;
    padding: 18px;
    font-size: 14px;
    color: #333333;  // 白色文字改为深灰色
    line-height: 22px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色
    background-color: #fafafa;  // 添加浅灰色背景，区分头部和内容区
  }

  &-body {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;  // 深色背景改为浅灰色
    padding: 40px;
    overflow: hidden;

    // 添加视频容器的投影效果，增强层次感
    .video-container {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      overflow: hidden;
      background-color: #000;  // 视频容器背景保持黑色，更好地显示视频内容
    }

    .video {
      max-width: 100%;
      max-height: 100%;
      border-radius: 4px;
      display: block;  // 确保视频没有额外边距
    }
  }
}
</style>
